<template>
<!-- 我要报名 -->
  <div class="infor">
    <!-- 顶部导航栏 --> 
    <van-nav-bar  title="成为志愿者"  left-arrow @click-left="$router.go(-1)"/>
    <div class="form">
      <!-- <div action=""> -->
        <!-- 姓 名 -->
        <div class='enroll-item'>
          <div class='item-title'>姓 名</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入姓名' v-model="name" />
        </div>
        <!-- 姓 别 -->
        <div class='enroll-item'>
          <div class='item-title'>姓 别</div>
          <div class='item-xing'>*</div>
          <van-radio-group v-model="radio" class="radio">
            <van-radio name="1" class="namn" checked-color="#D33043">男</van-radio>
            <van-radio name="2" class="namn " checked-color="#D33043">女</van-radio>
          </van-radio-group>
        </div>
        <!-- 出生年月 -->
        <div class='enroll-item' @click="showpopup">
          <div class='item-title'>出生年月</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请选择' v-model="data" disabled="disabled">
          
        </div>
        <!-- 职业 -->
        <div class='enroll-item'>
          <div class='item-title'>职业</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入' v-model="profession">
        </div>
        <!-- 政治面貌 -->
        <div class='enroll-item'>
          <div class='item-title'>政治面貌</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入' v-model="political">
        </div>
        <!-- 民族 -->
        <div class='enroll-item '>
          <div class='item-title'>民族</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入' v-model="nation">
        </div>
         <!-- 工作单位 -->
        <div class='enroll-item phon'>
          <div class='item-title'>工作单位</div>
          <!-- <div class='item-xing'>*</div> -->
          <input class='item-content' type='text' placeholder='请输入' v-model="company">
        </div>
        <!-- 身份证号 -->
        <div class='enroll-item  feedback'>
          <div class='item-title'>身份证号</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入' v-model="certificates" >
        </div>

        <!-- 最高学历 -->
        <div class='enroll-item '>
          <div class='item-title'>最高学历</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入' v-model="education">
        </div>
        <!-- 专业 -->
        <div class='enroll-item '>
          <div class='item-title'>专业</div>
          <!-- <div class='item-xing'>*</div> -->
          <input class='item-content' type='text' placeholder='请输入' v-model="major" >
        </div>
         <!-- 特长才能或专长 -->
        <div class='enroll-item phon'>
          <div class='item-title'>特长才能或专长</div>
          <!-- <div class='item-xing'>*</div> -->
          <input class='item-content' type='text' placeholder='请输入' v-model="speciaity">
        </div>

        <!-- 固定电话 -->
        <div class='enroll-item feedback'>
          <div class='item-title'>固定电话</div>
          <!-- <div class='item-xing'>*</div> -->
          <input class='item-content' type='number' placeholder='请输入'  v-model="fixedPhone">
        </div>
        <!-- 移动电话 -->
        <div class='enroll-item' @click="numberShow = !numberShow">
          <div class='item-title'>移动电话</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='number' placeholder='请输入电话' v-model="phone" disabled="disabled">
        </div>
        <!-- 电子邮箱 -->
        <div class='enroll-item '>
          <div class='item-title'>电子邮箱</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入'  v-model="mailbox">
        </div>
        <!-- 居住地址 -->
        <div class='enroll-item phon'>
          <div class='item-title'>居住地址</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入'  v-model="address">
        </div>
        <!-- 提供志愿服务时间 -->
        <div class='enroll-item feedback'>
          <div class='item-title'>提供志愿服务时间</div>
          <!-- <div class='item-xing'>*</div> -->
          <input class='item-content' type='text'  v-model="serviceTime" placeholder='具体到(每个月周几,上午或下午)' style="font-size: .56rem;">
        </div>

        <!-- 志愿者服务经验 -->
         <div class="feedback">
           <p class="service">志愿者服务经验</p>
            <textarea  placeholder="请输入" class="feed-input"  v-model="feedback"></textarea>
          </div>
        <!-- 志愿者服务项目 -->
        <div class='enroll-item feedback serviceLise'  @click="isShow = true,service()">
          
          <div class='item-title'>志愿者服务项目</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='多选'  disabled="disabled">
          <!-- <div>{{projectStr}}</div> -->
        </div>
        <div v-show="isShow" class="serviceBox">
            <ul class="chooser-list">
            <li v-for="(item,index) in typeList" :key="index" @click="item.isActive = !item.isActive,optionsClick(item)" :class="[item.isActive ? 'active' : '']" >{{ item.volName }}</li>
            <textarea v-if="other"  placeholder="请输入" class="feed-input" v-model="others"></textarea>
          </ul>
        </div>
        
        <!-- 志愿者通知 -->
        <p class="enroll-title">我志愿成为一名社区志愿者。我承诺：尽己所能，不计报酬，帮助他人，服务社会，弘扬“奉献、友爱、互助、进步”的志愿精神，为建设互助友爱、和谐美好的社会贡献力量！</p>
        <div class='enroll-item '>
          <div class='item-title'>申请人签字</div>
          <!-- <div class='item-xing'>*</div> -->
          <input class='item-content' type='text' v-model="name">
        </div>
        <div class='enroll-item phon'>
          <div class='item-title'>签字日期</div>
          <!-- <div class='item-xing'>*</div> -->
          <input class='item-content' type='text' v-model="signData">
        </div>
      </div>
      <div class="feed-btn">
        <button class="inforBtn" @click="inforBtn">成为志愿者</button>
      </div>
      <van-popup v-model="show" position="bottom">
        <van-datetime-picker  title="请选择出生年月"
            v-model="currentDate" 
            type="date" 
            :formatter="formatter"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :min-date="minDate"
            :max-date="maxDate"
          />
      </van-popup> 
      <van-number-keyboard
        :show="numberShow"
        theme="custom"
        close-button-text="完成"
        @blur="numberShow = false"
        @input="onInput"
        @delete="onDelete"
      />
    </div>
</template>
 <script>
import apiHttp from '../../../../api/index'
import { Toast,NumberKeyboard } from 'vant';
  export default {
    data(){
      return{
        numberShow:false,
        minDate:new Date(1920, 1, 1),
        maxDate: new Date(),
        id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
        name:"",        // 姓名
        radio: '1',     // 男/女
        data:"",        // 出生年月
        profession:"",  // 职业
        political:"",   // 政治面貌
        nation:"",      // 民族
        company:"",     // 工作单位
        certificates:"",// 身份证号
        education:"",   // 最高学历
        major:"",       // 专业
        speciaity:"",   // 特长才能或专长
        fixedPhone:"",  // 固定电话
        phone:"",       // 移动电话
        mailbox:"",     // 电子邮箱
        address:"",     // 居住地址
        serviceTime:"", // 提供志愿服务时间
        projectStr:'',     // 志愿者服务项目
        isShow:false,         
        feedback:"",    // 志愿者服务经验
        sign:"",        // 申请人签字
        signData:new Date().toLocaleDateString(),     // 签字日期
        show: false,
        currentDate: new Date(),
        typeList:[],
        other:false,
        disabled:false,
        userId:sessionStorage.getItem('userId'),
      }
    },
    mounted:function(){
       var d = new Date(this.signData)
      var _this = this; //声明一个变量指向Vue实例this，保证
          _this.signData = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();  //修改数据date
    },
    methods:{
      onInput(value){
        this.phone += value.toString()
      },
      onDelete(){
        if(this.phone.length > 0){
          this.phone = this.phone.substring(0, this.phone.length - 1);
        }
      },
      service() {  // 点击返回按钮
        if(this.isShow){
            apiHttp.comIndex.getVolTypeList('',resp=>{
              if(resp.resultCode == '000000'){
                  for(let i = 0; i < resp.data.typeList.length; i++){
                    resp.data.typeList[i].isActive = false
                  }
                  this.typeList = resp.data.typeList
              }else{
                Toast(resp.resultMsg)
              }
            })
        }
      },
      optionsClick(item){
        let str = []
        for(let i = 0; i < this.typeList.length; i++){
          if(this.typeList[i].isActive){
            str.push(this.typeList[i].id)
            if(this.typeList[i].volName=='其他（请注明）'){
              this.other = true
            }
          }else{
            this.other = false
          }
        }
        this.projectStr = str.join(',')
      },
      showpopup(){
        if(!this.show){
            this.show = true;
        }else{
            this.show = false;
        }
      },
      formatter(type, value) {
    　　if (type === 'year') {
      　　return `${value}年`;
    　　} else if (type === 'month') {
    　　  return `${value}月`
    　　} else if (type === 'day') {
      　　return `${value}日`
    　　} 
    　　return value;
  　　},
      onChange(picker,value,index){
         var d = new Date(this.currentDate)
         this.data = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      },
      onCancel(){
        this.show = false
      },
      onConfirm(){
        this.show = false
      },
      // 我要报名
      inforBtn(){
        let userId = ""
        let self = this
        var reg =  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 身份证件
        var reb=11 && /^((13|14|15|17|18|19|16)[0-9]{1}\d{8})$/;    // 手机号
        var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;  // 电子邮箱
          if(this.name ==""){
            Toast("请输入用户名");
            return
          }else if(this.data == ""){
            Toast("请选择出生年月");
            return
          }else if(this.profession == ""){
            Toast("请输入职业");
            return
          }else if(this.political == ""){
            Toast("请输入政治面貌");
            return
          }else if(this.nation == ""){
            Toast("请输入民族");
            return
          }else if(this.certificates == ""){
            Toast("请输入身份证号");
            return
          }else if(!reg.test(this.certificates)){
            Toast("身份证格式有误,请重新输入");
            return
          }else if(this.education == ""){
            Toast("请输入最高学历");
            return
          }else if(this.phone ==""){
            Toast("手机号不能为空");
            return
          }else if(!reb.test(this.phone)){
            Toast("手机号格式错误请重新输入");
            return
          }else if(this.mailbox =="" ){
            Toast("请输入电子邮箱");
            return
          }else if(!regex.test(this.mailbox)){
            Toast("电子邮箱格式错误请重新输入");
            return
          }else if(this.address == ""){
            Toast("请输入居住地址");
            return
          }else if(this.projectStr == ""){
            Toast("请选择服务项目");
            return
          }
          let params ={
            userId:this.userId,
            commId:this.id,
            volunName:this.name,
            volunSex:this.radio,
            volunBirth:this.data,
            volunJob:this.profession,
            volunPolitics:this.political,
            volunNationality:this.nation,
            volunWorkAddress:this.company,
            volunCard:this.certificates,
            volunEducation:this.education,
            volunMajor:this.major,
            volunHobby:this.speciaity,
            volunFixationPhone:this.fixedPhone,
            volunPhone:this.phone,
            volunAddress:this.address,
            volunEmail:this.mailbox,
            volunExperience:this.feedback,
            volunType:this.projectStr,
            volunOthers:this.others,
            volunTime:this.serviceTime
          }
          apiHttp.comIndex.addVolunteer(params,resp=>{
              if(resp.resultCode == '000000'){
                Toast('加入志愿者成功')
                self.$router.push({path: "./recruiting",query: { id:this.id}})
              }else{
                Toast(resp.resultMsg)
              }
            })
        }
    
    }
  }
 </script>
 <style scoped>
 input::-webkit-input-placeholder{
    color: #ccc;
}
    .radio{
      width: 100%;
      display: flex;
      margin-left: 48%;
      float: right;
    }
    .namn{
      float: right;
    }
    .van-radio{
      margin: 0 8px;
    }

   .form{
     /* padding: 0 0.3rem; */
     width: 92%;
     margin: 0 auto;
     background-color:#fff;
     font-size: 0.6rem;
     margin-top: 0.4rem;
     margin-bottom: 1rem;
   }
   .enroll-item {
    display: flex;
    flex-direction: row;
    padding: 0 0.5rem;
    height: 2rem;
    flex-wrap: nowrap;
    align-items: center;
     /* width: 92%; */
     margin: 0 auto;
    border-bottom: 1px solid #D8D8D8;
  }
  .enroll-item input{
    background-color: #ffffff;
    color: #666666;
  }
  .phon{
     border-bottom: 0px;
  }
  .item-title {
    font-size: 30rpx;
    color: #000000;
    
    white-space: nowrap;
  }

  .item-xing {
    color: #fc6262;
    margin-top: 0.3rem;
  }

  .item-content {
    /* margin-left: 1rem; */
    color: #000;
    flex: 1;
    text-align: right;
    padding-left: 1rem;
    width: 80%;
    background-color:transparent;
  }
  input{
    border:none;
  }
  .feed-btn{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1rem;
  }
  .inforBtn{
    bottom: 1rem;
    /* position: fixed; */
    border: none;
    width: 90%;
    line-height: 1.8rem;
    border-radius: 6px;
    background-color: #D33043;
    color: #FFFFFF;
    font-size: 0.8rem;
  }
   .feed-input{
      width:100%;
      background-color:#ffffff;
      font-size: 0.7rem;
      color:#000;
      padding: 0.3rem;
      height: 3rem;
      border-radius:4px;
      border:none;
      
   }
   .feedback{
      width:100%;
      border-top: 5px solid #F5F5F5;
      border-bottom: 5px solid #F5F5F5;
      min-height: 2rem;
      height: auto;
   }
   .serviceLise{
      position: relative;
   }
    .serviceBox{
      padding: 0.5rem 0;
      /* position: absolute; */
      background-color:#ffffff;
      /* width: 92%; */
      border-bottom: 5px solid #F5F5F5;
    }
    ul, li {
      margin: 0;
      padding:0;
      list-style: none;
    }
    .chooser {
      position: relative;
      display: inline-block;
    }
    .chooser-list li{
      margin: 5px;
      padding: 0 0.3rem;
      line-height: 1.2rem;
      font-size: .62rem;
      border-radius: 7px;
      display: inline-block;
      border: 1px solid #9C9C9C;
      color: #9C9C9C;
      text-align: center;
      background: #fff;
    }
    .chooser-list li.active {
      border-color: #097fe0;
      color: #097fe0;
      background: #fff;
    }
    ul li.active{
      color: green;
    }
   .service{
     padding: 10px 0 0.1rem 0.5rem;
   }
   .enroll-title{
      padding: 0.3rem 0.5rem;
      line-height: 0.85rem;
      font-weight: 600;
      font-size: 0.6rem;
   }
 </style>
